import React, { useState } from 'react';
import {
  LinuxOutlined, AndroidOutlined, RedditOutlined, AppleOutlined,
  WindowsOutlined, IeOutlined, ChromeOutlined, GithubOutlined,
  AliwangwangOutlined, DingdingOutlined, WeiboSquareOutlined,
  TwitterOutlined, YoutubeOutlined, FacebookOutlined,
  CodepenCircleOutlined, SlackOutlined, OpenAIOutlined,
  TeamOutlined,
  UserOutlined,
  SearchOutlined,
  VideoCameraAddOutlined
} from '@ant-design/icons';
import { DownOutlined } from '@ant-design/icons';
import type { DropdownProps, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import { Breadcrumb, Layout, Menu, theme, Button, Popover } from 'antd';
import { NavLink, Navigate, Outlet, useNavigate } from 'react-router-dom';
import { homeItem } from '../../unit/type';
import { routerBox } from '../../router/router';
import './layout.scss'

// 遮罩
import ZheBox from './content/zheBox'
import ZheBox1 from './content/zheBox1'
import ZheBox2 from './content/zheBox2'
import ZheBox3 from './content/zheBox3'
import ZheBox4 from './content/zheBox4'
import ZheBox5 from './content/zheBox5'

// vant组件库
import { NoticeBar, Swiper } from 'react-vant'

type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
function layout() {
  const { Header, Content, Sider } = Layout;
  function setIcon(src: any) {
    switch (src) {
      case "LinuxOutlined":
        return <LinuxOutlined />
      case "AndroidOutlined":
        return <AndroidOutlined />
      case "RedditOutlined":
        return <RedditOutlined />
      case "AppleOutlined":
        return <AppleOutlined />
      case "WindowsOutlined":
        return <WindowsOutlined />
      case "IeOutlined":
        return <IeOutlined />
      case "ChromeOutlined":
        return <ChromeOutlined />
      case "GithubOutlined":
        return <GithubOutlined />
      case "AliwangwangOutlined":
        return <AliwangwangOutlined />
      case "DingdingOutlined":
        return <DingdingOutlined />
      case "WeiboSquareOutlined":
        return <WeiboSquareOutlined />
      case "YoutubeOutlined":
        return <YoutubeOutlined />
      case "FacebookOutlined":
        return <FacebookOutlined />
      case "CodepenCircleOutlined":
        return <CodepenCircleOutlined />
      case "SlackOutlined":
        return <SlackOutlined />
      case "OpenAIOutlined":
        return <OpenAIOutlined />
    }
  }

  const renderHome = (arr: homeItem[]) => {
    const items: any = []
    arr && arr.map((item, index) => {
      return items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.id,
        setIcon(item.icon), item.children && renderHome(item.children)))
    })
    return items
  }

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const click = (e: any) => {
    // console.log(e)
    // if(e.key == '5'){
    //   window.open('/home/ai')
    // }else{
    //   navigate(`${e.key}`)
    // }
  }

  // 搜索
  const [open, setOpen] = useState(false);

  const handleMenuClick: MenuProps['onClick'] = (e: any) => {
    if (e.key === '3') {
      setOpen(false);
    }
  };

  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen);
    }
  };

  interface ItemType {
    label: string;
    key: string;
  }
  interface MenuProps {
    items: ItemType[];
  }
  const [items, setItems] = useState<ItemType[]>([
    {
      label: '全部',
      key: '1',
    },
    {
      label: 'H5',
      key: '2',
    },
    {
      label: '海报',
      key: '3',
    },
    {
      label: '长页',
      key: '4',
    },
    {
      label: '表单',
      key: '5',
    },
    {
      label: '互动',
      key: '6',
    },
    {
      label: '电子画册',
      key: '7',
    },
    {
      label: '视频',
      key: '8',
    },
    {
      label: '解决方案',
      key: '9',
    },
  ])
  // 定义搜索框的显现隐藏

  const [ShowSearch, setShowSearch] = useState('none')
  window.addEventListener("scroll", () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop >= 10) {
      setShowSearch('block')
    } else {
      setShowSearch('none')
    }
  })


  return (
    <div className="box">
      <Header className='header'>
        <img src="/src/assets/image/log.png" alt="" style={{ width: '120px', height: '50px' }} />
        <ul className='ulBox'>
          <div className='zheBox'>
            <a href="">免费模版</a>
            <div className="zhezhao">
              <ZheBox></ZheBox>
            </div>
          </div>
          <div className='zheBox1'>
            <a href="">开通会员</a>
            <div className="zhezhao1">
              <ZheBox1></ZheBox1>
            </div>
          </div>
          <div className='zheBox2'>
            <a href="">产品服务</a>
            <div className="zhezhao2">
              <ZheBox2></ZheBox2>
            </div>
          </div>
          <div className='zheBox3'>
            <a href="">解决方案</a>
            <div className="zhezhao3">
              <ZheBox3></ZheBox3>
            </div>
          </div>
          <div className='zheBox4'>
            <a href="">内容中台</a>
            <div className="zhezhao4">
              <ZheBox4></ZheBox4>
            </div>
          </div>
          <div className='zheBox5'>
            <a href="">资源与合作</a>
            <div className="zhezhao5">
              <ZheBox5></ZheBox5>
            </div>
          </div>
        </ul>
        <div style={{ display: ShowSearch }}>
          <div className="search">
            <Dropdown
              menu={{
                items,
                onClick: handleMenuClick,
              }}
              onOpenChange={handleOpenChange}
              open={open}
            >
              <a onClick={(e) => e.preventDefault()}>
                <Space>
                  全部

                  {/* {items.map((item, index) => (
                  <div key={index}>{item.label}</div>
                ))} */}
                  <DownOutlined />
                </Space>
              </a>
            </Dropdown>
            | <NoticeBar style={{ height: '30px', width: '100px', background: '#fff' }}>
              <Swiper
                autoplay={3000}
                indicator={false}
                vertical
                className='notice-swipe'
              >

                <Swiper.Item>全部</Swiper.Item>
                <Swiper.Item>海报</Swiper.Item>
                <Swiper.Item>表单</Swiper.Item>
              </Swiper>
            </NoticeBar><VideoCameraAddOutlined style={{ fontSize: '20px', color: 'blue' }} />
            <button><SearchOutlined /></button>
          </div>
        </div>

        <div className="btn">
          <Button type='primary'>登录/注册</Button>
          <img className='imgBtn' src="/src/assets/image/log4.webp" alt="" style={{ width: '250px', height: '40px' }} />
        </div>


      </Header>
      <Layout style={{ minHeight: '90vh', marginTop: '15px' }}>
        <Sider collapsible collapsed={collapsed} theme='light' onCollapse={(value) => setCollapsed(value)}>
          <Menu theme='light' defaultSelectedKeys={['1']} mode="inline" items={renderHome(routerBox)} onClick={click} />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer, width: '80%', height: '30px' }} />
          <Content style={{ margin: '0 16px' }}>
            <div className='content'>
              <img src="/src/assets/image/log2.webp" alt="" />
              <div className="seaBox">
                <Dropdown 
                  menu={{
                    items,
                    onClick: handleMenuClick,
                  }}
                  onOpenChange={handleOpenChange}
                  open={open}
                >
                  <a onClick={(e) => e.preventDefault()}>
                    <Space style={{width:'50px'}}>
                      全部
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
                | <NoticeBar style={{ height: '30px', width: '300px', background: '#fff' }}>
                  <Swiper
                    autoplay={3000}
                    indicator={false}
                    vertical
                    className='notice-swipe'
                  >

                    <Swiper.Item>全部</Swiper.Item>
                    <Swiper.Item>海报</Swiper.Item>
                    <Swiper.Item>表单</Swiper.Item>
                  </Swiper>
                </NoticeBar><VideoCameraAddOutlined style={{ fontSize: '20px', color: 'blue' }} />
                <button><SearchOutlined /></button>
              </div>
              <img className='imgBox' src="/src/assets/image/QQ1.png" alt="" style={{ marginLeft: '10%', height: '50px' }} />
              {/* <div className='zheBox'>
                
                <img src="https://calendar.eqxiu.com/cl/mini?full=1" alt="" />
              </div> */}
            </div>
            {/* <Breadcrumb items={[
              { title: '首页', key: 'home' },
              { title: '应用列表', key: 'list' },
              { title: '应用', key: 'app' },
            ]} /> */}

            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
        </Layout>
      </Layout>
    </div>

  )
}

export default layout
